<template>
	<view>
		<view class="expertise">
			<view class="numbers">
				<text>金额提现</text>
			</view>
			<view class="subject">
				<text>¥</text>
				<input type="digit" v-model="moneys" placeholder="0.00" />
			</view>
			<view class="withdraw-method">
				<text>选择提现方式:</text>
				<text @click="cardNex">{{card}}</text>
			</view>
			<view class="Conference">
				提示: 当前余额为<text>¥{{ userInfo.money }}</text>
			</view>
		</view>
              <!-- #ifdef MP-WEIXIN -->
		<view class="customer">
			
			
			<u-button
				  :ripple="true" ripple-bg-color="rgba(0, 0, 0, 0.15)" color="linear-gradient(to right, rgb(253, 142, 26), rgb(255, 102, 0))" :hair-line="false" shape="circle"
				 mode="dark" @click="funds">
				提现
			</u-button>
			
			 
		</view>	
		 <!-- #endif -->
		  <!-- #ifdef  H5 -->
		 <u-button style="margin: 60rpx auto; width: 80%; background: linear-gradient(180deg, #FD8E1A 0%, #ff6600 100%);"
		 	type="error" :ripple="true" ripple-bg-color="rgba(0, 0, 0, 0.15)" :hair-line="false" shape="circle"
		 	class="u-m-t-50" mode="dark" @click="funds">
		 	提现
		 </u-button>
		 <!-- #endif -->
		
		<u-picker :show="pickerShow" :columns="[bankCardList]" keyName="name" @cancel="pickerShow = false"
			@confirm="confirms"></u-picker>
	</view>
</template>
<script>
	import {
		mapState,
		mapActions
	} from 'vuex';

	export default {
		data() {
			return {
				pickerShow:false,
				moneys: '',
				bankCardList: [],
				card: '请选择银行卡',
				cardID:'',

			}
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onLoad() {
			this.getUserInfo();
			this.courier()
		},
		methods: {
			...mapActions('user', ['getUserInfo']),
			cardNex(e) {
				if (this.bankCardList.length == 0) {
					uni.showModal({
						title: '提示',
						content: '请先添加银行卡',
						success: (res) => {
							if (res.confirm) {
								uni.$u.route('/pages/content/bankCard/bankCard', () => {
									// 页面跳转完成后的回调函数
									console.log('页面跳转完成');
									// 关闭弹窗
									// uni.hideModal();
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
								// 当showCancel为false时，这部分代码是不会执行的
							}
						}
					})
					return
				}
				this.pickerShow = true
				// this.card
			},
			confirms(e) {
				this.pickerShow = false;
				this.card = e.value[0].name;
				this.cardID = e.value[0].id
			},
			funds() {
				if (this.moneys == '') {
					return uni.$u.toast('请填写提现金额');
				}
				if (this.moneys > this.userInfo.money) {
					return uni.$u.toast('当前余额不足');
				}
				if (this.cardID === '' ) {
					return uni.$u.toast('请先选择银行卡');
				}
				this.$api.withd({
					id: this.cardID,
					money: this.moneys,
				}).then(res => {
					console.log(res, 'res');
				});
			},
			courier() {
				this.$api.information().then(res => {
					console.log(res, 'res')
					this.bankCardList = res.data.map(item => ({
					    code: item.bank_code,
					    name: item.bank_name,
						...item
					}));
				})
			},
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.expertise {
		width: 80%;
		margin: 20rpx auto;
		border-radius: 20rpx;
		padding: 50rpx;
		background-color: #ffffff;
		height: 260rpx; // 调整高度以适应新元素

		.numbers {
			color: #7f7f7f;
			font-size: 28rpx;
			margin: 20rpx 0;
		}

		.subject {
			display: flex;
			align-items: center;

			text {
				font-size: 33rpx;
				color: #000;
			}

			input {
				font-size: 38rpx;
				color: #808080;
				margin-left: 20rpx;
			}

			padding: 20rpx 0;
			border-bottom: 1rpx solid #ededed;
		}

		.withdraw-method {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				font-size: 28rpx;
				color: #7f7f7f;
			}

		}

		.Conference {
			padding: 20rpx 0;
			color: #bebebc;
			font-size: 28rpx;

			text {
				color: #ff8022;
			}
		}
	}
	.customer{
		 margin: 60rpx auto; 
		 width: 80%;
		 border-radius: 100rpx;
		 text-align: center;
	}
	 
</style>